<template>
    <fieldset>
        <legend>购物车</legend>
        <h1>购物车:cart</h1>
        <ul>
            <li v-for="item in carts" :key="item.id">
                <b>产品名称:{{ item.title }}</b>
                -------
                <b>价格:{{ item.price }}</b>
                -------
                <b>数量:{{ item.count }}</b>
                -------
                <button @click="del(item)">-</button>
            </li>
        </ul>
        <h1>总价:{{ total}}</h1>
    </fieldset>
</template>
<script>
import { mapActions, mapGetters, mapState } from 'vuex';

 export default{
    computed:{
        ...mapState('cart',['carts']),
        ...mapGetters('cart',['total'])
    },
    methods:{
        del(item){
            this.DEL_COUNT(item)
        },
        ...mapActions('cart',['DEL_COUNT'])
    }
 }
</script>